<template>
	<div class="outer_resume">
		<edu-p v-if="show[1]"></edu-p>
		<work-p v-if="show[2]"></work-p>
		<math-p v-if="show[3]"></math-p>
		<honor-p v-show="show[4]"></honor-p>
		<my-self v-show="show[5]"></my-self>
		<div class="resume" v-show="show[0]">
			<div class="who">{{personinfor[0]}}</div>
			<!-- 基本信息 -->
			<div class="infor">
				<div class="outer">可以通过首页修改基本信息哦</div>
				<li>基本信息: <span>{{personinfor[1]}}</span>|<span>{{personinfor[6]}}毕业生</span></li>
				<li>最高学历: <span>{{personinfor[3]}}</span></li>
				<li>毕业院校: <span>{{personinfor[4]}}</span></li>
				<li>联系电话: <span>{{personinfor[7]}}</span></li>
				<li>电子邮箱: <span>{{personinfor[8]}}</span></li>
			</div>
			<img :src="personinfor[1]=='男'?'images/men.png':'images/women.png'" alt="">
			<div class="title">教育背景</div>
			<div class="hr"></div>
			<!-- 教育经历 -->
			<div class="education">
				<div class="edu" v-for="(val,ind) in msg.educations">
					<div class="hov">
						<div class="but_outer">
							<div class="but"@click='showWay([1,0]);setEdu([id,0,ind])'>编辑</div>
							<div class="but"@click='addEdu(ind)' >添加</div>
							<div class="but"@click='removeEdu(ind)'>删除</div>
						</div>
					</div>
					<div>
						<li>{{val.time}}</li>
						<li>{{val.school}}</li>
						<li>{{val.major}}</li>
						<li>{{val.grade}}</li>
					</div>
					<p>{{val.about}}</p>
				</div>
			</div>
			
			<!-- 工作经历 -->
			<div class="title">工作经历</div>
			<div class="hr"></div>
			<div class="work">
				<div class="edu" v-for="(val,ind) in msg.works">
					<div class="hov">
						<div class="but_outer">
							<div class="but"@click='showWay([2,0]);setEdu([id,1,ind])'>编辑</div>
							<div class="but"@click='addWork(ind)' >添加</div>
							<div class="but"@click='removeWork(ind)'>删除</div>
						</div>
					</div>
					<div>
						<li>{{val.time}}</li>
						<li>{{val.company}}</li>
						<li>{{val.type}}</li>
						<li>{{val.position}}</li>
					</div>
					<p>{{val.about}}</p>
				</div>
			</div>
			
			
			<!-- 项目、比赛 -->
			<div class="title">参与项目/参与比赛</div>
			<div class="hr"></div>
			<div class="match">
				<div class="edu" v-for="(val,ind) in msg.matchs">
					<div class="hov">
						<div class="but_outer">
							<div class="but"@click='showWay([3,0]);setEdu([id,2,ind])'>编辑</div>
							<div class="but"@click='addMatch(ind)' >添加</div>
							<div class="but"@click='removeMatch(ind)'>删除</div>
						</div>
					</div>
					<div>
						<li>{{val.time}}</li>
						<li>{{val.name}}</li>
						<li>{{val.type}}</li>
						<li>{{val.position}}</li>
					</div>
					<p>{{val.about}}</p>
				</div>
			</div>
			
			
			<!-- 获得荣誉 -->
			<div class="title">获得荣誉</div>
			<div class="hr"></div>
			<div class="honor">
				<div class="edu" v-for="(val,ind) in msg.honors">
					<div class="hov">
						<div class="but_outer">
							<div class="but"@click='showWay([4,0]);setEdu([id,3,ind])'>编辑</div>
							<div class="but"@click='addHonor(ind)' >添加</div>
							<div class="but"@click='removeHonor(ind)'>删除</div>
						</div>
					</div>
					<div>
						<li>{{val.time}}</li>
						<li>{{val.name}}</li>
						<li>{{val.position}}</li>
						<li>{{val.position}}</li>
					</div>
					<p>{{val.about}}</p>
				</div>
			</div>
			
			<!-- 自我介绍 -->
			<div class="title">自我评价</div>
			<div class="hr"></div>
			<div class="edu" style="min-height: 50px;">
				<div class="hov">
					<div class="but_outer" style="width: 130px;">
						<div class="but" @click='showWay([5,0]);setEdu([id,4,0])'>编辑</div>
						<div class="but" @click='reSelf()'>清除</div>
					</div>
				</div>
				<p>{{msg.talk[0].about}}</p>
			</div>
		</div>
		<div style="width: 0px;height: 0px; display: block;">{{haha}}</div>
	</div>
</template>

<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
import education from './education.vue'
import work from './work.vue'
import match from './match.vue'
import honor from './honor.vue'
import myself from './self.vue'
export default{
	name:'Resume',
	components:{
		'edu-p':education,
		'work-p': work,
		'math-p': match,
		'honor-p': honor,
		'my-self': myself,
	},
	data(){
		return{
			id:this.$route.params.id,
			msg:null,
		}
	},
	created() {
		this.msg = this.resumes[this.id]
		console.log("正在编辑的数据",this.msg,"数据源",this.resumes)
		console.log("正在答应",this.msg.talk)
	},
	beforeDestroy() {
		this.showWay([0,1,2,3,4])
	},
	computed:{
		...mapState(['personinfor','resumes','show','haha'])
	},
	methods:{
		...mapGetters(['getResumetext']),
		...mapMutations(['setEdu','showWay']),
		// 教育经历事件
		addEdu(){
			if(this.msg.educations.length<=1){
				let obj = {'time':'入学-毕业时间','school':'院校名称','major':'主修专业','grade':'学历','about':'可以在这里描述你的主修课程......'}
				this.msg.educations.push(obj)
			}
		},
		removeEdu(ind){
			this.msg.educations.splice(ind,1)
			if(this.msg.educations.length<1){
				let obj = {'time':'入学-毕业时间','school':'院校名称','major':'主修专业','grade':'学历','about':'可以在这里描述你的主修课程......'}
				this.msg.educations.push(obj)
			}
		}, 
		// 工作经历事件
		addWork(){
			if(this.msg.works.length<=2){
				let obj = {'time':'入职-离职时间','company':'公司名称','type':'实习','position':'职位名称','about':'可以在这里谈谈你的在职经历……'}
				this.msg.works.push(obj)
			}
		},
		removeWork(ind){
			this.msg.works.splice(ind,1)
			if(this.msg.works.length<1){
				let obj = {'time':'入职-离职时间','company':'公司名称','type':'实习','position':'职位名称','about':'可以在这里谈谈你的在职经历……'}
				this.msg.works.push(obj)
			}
		},
		// 项目-比赛事件
		addMatch(){
			if(this.msg.matchs.length<=2){
				let obj = {'time':'开始-结束时间','name':'项目/比赛名称','position':'担任角色','about':'可以在这里谈谈你的项目/比赛成果哦......',}
				this.msg.matchs.push(obj)
			}
		},
		removeMatch(ind){
			this.msg.matchs.splice(ind,1)
			if(this.msg.matchs.length<1){
				let obj = {'time':'开始-结束时间','name':'项目/比赛名称','position':'担任角色','about':'可以在这里谈谈你的项目/比赛成果哦......',}
				this.msg.matchs.push(obj)
			}
		},
		// 获奖
		addHonor(){
			if(this.msg.honors.length<3){
				let obj = {
					'time':'开始-结束时间',
					'name':'获得奖项',
					'about':'可以在这里描述你的项目/比赛成果......',
				}
				this.msg.honors.push(obj)
			}
		},
		removeHonor(ind){
			this.msg.honors.splice(ind,1)
			if(this.msg.honors.length<1){
				let obj =  obj = {
					'time':'开始-结束时间',
					'name':'获得奖项',
					'about':'可以在这里描述你的项目/比赛成果......',
				}
				this.msg.matchs.push(obj)
			}
		},
		reSelf(){
			this.msg.talk[0].about="在这里谈谈你自己吧"
		},
	}
}
</script>

<style scoped lang="less">
.outer_resume{
	position: relative;
	width: 750px;
	min-height: 70vh;
	margin: auto;
	text-align: left;
	user-select: none;
	.resume{
		width: 720px;
		padding: 60px 70px;
		border-radius: 10px;
		background-color: #fff;
	}
	p{padding-left: 100px;font-size: 12px; color: #888;}
	.who{
		font-size: 2.5rem;
		font-weight: 700;
		padding-bottom: 20px;
	}
	// 个人信息
	img{
		position: absolute;
		top: 130px;
		right: 20px;
		width: 100px;
		height: 105px;
	}
	.infor{
		position: relative;
		width: 75%;
		border: 1px solid #fff;
		div{
			position: absolute;
			top: 0;
			width: 100%;
			color: #fff;
			font-size: 16px;
			text-align: center;
			line-height: 135px;
		}
		div:hover{
			color: #047aff;
		}
		li{
			font-size: 14px;
			line-height: 27px;
			color: #222;
			span{
				padding: 0 10px;
				color: #666;
			}
		}
	}
	.infor:hover{
		background-color: #eee;
		opacity: 0.8;
		border: 1px dashed #378aff;
	}
	.title{
		margin:10px 0 10px 0;
		text-align: left;
		font-size: 16px;
		font-weight: 700;
		color: #223;
	}
	.hr{
		width: 100%;
		height: 0px;
		border-bottom: 1px solid #444;
	}
	.edu{
		position: relative;
		min-height: 60px;
		margin-top: 4px;
		padding: 10px 4px;
		padding-bottom: 10px;
		border: 1px dashed #fff;
		div{
			display: flex;
			justify-content: space-between;
			font-weight: 700;
			color: #222;
			font-size: 12px;
			li{
				width: 25%;
				padding-bottom: 10px;
			}
		}
		.hov{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 9;
		}
		.hov:hover{
			opacity: 1;
		}
		.but_outer{
			position: absolute;
			width: 200px;
			display: flex;
			top: 25px;
			right: 20px;
			.but{
				padding:0 15px;
				text-align: center;
				line-height: 25px;
				border-radius: 3px;
				background-color: #fff;
				border: 1px solid #aaa;
				color:  #409aff;
			}
			.but:hover{
				background-color:  #409aff;
				color: #fff;
			}
		}
	}
	.edu:hover{
		background-color: #eee;
		border: 1px dashed #378aff;
	}
}
</style>
